<template>
	<el-dialog
		title="订单详情"
		width="550px"
		top="8vh"
    :close-on-click-modal="false"
		:visible.sync="dialogVisible"
	>
		<div class="detail-wrap">
			<div class="item">
				<div class="label">订单状态：</div>
				<div class="value">
					<el-tag size="small" :type="ORDER_TAG_STATUS[row.status]">
						{{ ORDER_STATUS[row.status] }}
					</el-tag>
				</div>
			</div>
			<div class="item">
				<div class="label">订单名称：</div>
				<div class="value">{{ row.orderName }}</div>
			</div>
			<div class="item">
				<div class="label">订单备注：</div>
				<div class="value">{{ row.description || "暂无备注" }}</div>
			</div>
			<div class="item">
				<div class="label">订单编号：</div>
				<div class="value">{{ row.id }}</div>
			</div>
			<div class="item">
				<div class="label">创建时间：</div>
				<div class="value">{{ row.createdTime }}</div>
			</div>
			<div class="item">
				<div class="label">更新时间：</div>
				<div class="value">{{ row.updatedTime }}</div>
			</div>
			<div class="item">
				<div class="label">创建人：</div>
				<div class="value">{{ row.creatorName }}</div>
			</div>
			<div class="item" v-if="row.quotationCreatorName">
				<div class="label">报价人：</div>
				<div class="value">{{ row.quotationCreatorName }}</div>
			</div>
			<div class="item" v-if="row.inoutCreatorName">
				<div class="label">出库人：</div>
				<div class="value">{{ row.inoutCreatorName }}</div>
			</div>
			<div class="item" v-if="row.fee">
				<div class="label">路费：</div>
				<div class="value">{{ row.fee }}</div>
			</div>
			<div class="item align-start">
				<div class="label">门店平面图：</div>
				<div class="value">
					<el-image
						v-for="(item, index) in storeImgList"
						:key="item + index"
						style="width: 100px; height: 100px; margin: 0 5px 5px 0"
						:src="item"
						:preview-src-list="[item]"
						fit="cover"
					></el-image>
				</div>
			</div>
			<div class="item">
				<div class="label">出库单：</div>
				<div class="value">
					<el-button @click="preview" size="small" type="primary"
						>预览出库单</el-button
					>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import { ORDER_TAG_STATUS, ORDER_STATUS } from "@js/params";
import { LOGIN_PATH } from "@/assets/js/define";
import { mapState } from "vuex";
export default {
	data() {
		return {
			quoteDosage: "",
			modify: "detail",
			dialogVisible: false,
			ORDER_STATUS,
			ORDER_TAG_STATUS,
			row: {},
			quoteList: [],
			emptyUrl:
				"https://front-xps-cdn.xsyx.xyz/custom/stock-c/h5/prod_none.png",
		};
	},
	computed: {
		...mapState(["token"]),
		totalSalePrice() {
			const { quoteMap } = this;
			const { add, mul } = this.$acc;
			return Object.values(quoteMap)
				.map((e) => mul(e.dosageNum || 0, e.salePrice || 0))
				.reduce((a, b) => add(a, b), 0);
		},
		quoteMap() {
			const { quoteDosage } = this;
			let map = {};
			try {
				map = JSON.parse(quoteDosage);
			} catch (e) {}
			return map;
		},
		storeImgList() {
			let { storeImgs = "" } = this.row;
			return storeImgs.split(",").map((e) => `${this.$imgHost}${e}`);
		},
		totalClassify() {
			return [...new Set(this.quoteList.map((e) => e.directoryId))].length;
		},
		totalQty() {
			return this.quoteList.reduce((pre, next) => pre + (next.qty || 0), 0);
		},
		totalPrice() {
			return this.quoteList.reduce(
				(pre, next) => pre + (next.qty || 0) * (next.price || 0),
				0
			);
		},
		exPrice() {
			return this.quoteList
				.filter((e) => e.directoryName === "路费")
				.reduce((pre, next) => pre + (next.qty || 0) * (next.price || 0), 0);
		},
		quoteListMap() {
			const map = {};
			const { quoteList } = this;
			quoteList.forEach((item) => {
				const cur = {
					directoryId: item?.directoryId || "",
					directoryName: item?.directoryName || "",
					arr: [],
				};
				map[item.directoryId] = map[item.directoryId] || cur;
				map[item.directoryId].arr.push(item);
			});
			return map;
		},
		newTotalQty() {
			let res = 0;
			const { quoteListMap: map, quoteMap } = this;
			for (const k in map) {
				if (Object.hasOwnProperty.call(map, k)) {
					const item = map[k];
					res += item.arr.reduce(
						(a, b) => a + b.qty * (quoteMap[item.directoryId]?.dosageNum || 0),
						0
					);
				}
			}
			return res;
		},
	},
	watch: {},
	methods: {
		preview() {
			const { id } = this.row;
			let url = `${LOGIN_PATH}#/quoteExport?type=preview&id=${id}&token=${this.token}`;
			window.open(url, "_blank", "height=667 ,width=375,top=200,left=400");
		},
		showDialog(modify = "detail", row = {}) {
			this.dialogVisible = true;
			this.row = row;
			this.modify = modify || "detail";
			// this.getQuotation(row.id);
		},
		getQuotation(id) {
			if (id) {
				this.$api.orderDetail({ id }).then((res) => {
					this.quoteDosage = res.quoteDosage || "";
				});
				this.$api
					.getOrderQuotation({
						id,
					})
					.then((res) => {
						this.quoteList = (res || []).map((e) => {
							const material = e.material || {};
							const directory = e.directory || {};
							return {
								...material,
								directoryId: directory?.id || "",
								directoryName: directory?.name || "",
								q_id: e.id,
								q_count: e.count,
								qty: e.count,
								orderId: e.orderId,
							};
						});
					});
			}
		},
	},
};
</script>

<style lang="less" scoped>
.detail-wrap {
	max-height: 70vh;
	overflow-y: auto;
	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 12px;
	}
	.item {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		&.align-start {
			align-items: flex-start;
		}
		.label {
			font-size: 14px;
			font-weight: bold;
			color: #666;
			width: 90px;
			text-align: right;
		}
		.value {
			flex: 1;
			overflow: hidden;
			word-break: break-all;
			white-space: pre-wrap;
		}
	}
	.total-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding-right: 20px;
		.p1 {
			padding-right: 25px;
		}
	}
	.quote-item {
		padding-left: 20px;
		margin-bottom: 20px;
		.quote-title {
			font-size: 14px;
			font-weight: bold;
			color: #666;
			position: relative;
			@size: 8px;
			&::before {
				display: inline-block;
				content: "";
				position: absolute;
				width: @size;
				height: @size;
				background: #409eff;
				border-radius: 50%;
				left: -15px;
				top: 50%;
				margin-top: -4px;
			}
		}
		.quote {
			padding-left: 20px;
			display: flex;
			margin-top: 15px;
			.info {
				flex: 1;
				overflow: hidden;
				padding-left: 15px;
				span {
					margin-right: 8px;
				}
				.price {
					margin-right: 20px;
					color: #e6a23c;
				}
				.infoname {
					font-weight: bold;
					color: #666;
				}
				.infotip {
					margin-top: 5px;
				}
			}
		}
	}
}
</style>

